<template>
  <div class="container">
    <div class="material-panel" ref="materialContainer">
      <div class="material-block" v-for="mat in materials" :key="mat.type">
        {{mat.title}}
      </div>
    </div>
    <div class="layout" ref="layoutContainer">
      <div class="layout-item" v-for="(d,index) in data" :key="index">
        {{ d.content }}
      </div>
    </div>
  </div>
  <DndContainer>
    <div>123</div>
  </DndContainer>
</template>

<script setup>
import { dropHandlers,smoothDnD } from 'smooth-dnd';
import {onMounted,ref,toRaw} from 'vue';
smoothDnD.dropHandler = dropHandlers.reactDropHandler().handler

import {DndContainer} from '@/components/SmoothDnd/DndContainer.js';
const materials=[
  {title:"图片",type:"image"},
  {title:"文本",type:"text"},
  {title:"按钮",type:"button"},
  {title:"输入框",type:"input"},
  {title:"下拉框",type:"select"},
  {title:"单选框",type:"radio"}
]

const data=ref([
  {
    id:1,
    type:"image",
    title:"图片",
    content:"https://cdnjs.cloudflare.com/ajax/libs/twemoji/11.3.0/2/svg/1f469-200d-1f692.svg",
    x:0,
    y:0,
    width:100,
    height:100
  },
  {
    id:2,
    type:"text",
    title:"文本",
    content:"这是一个文本",
    x:0,
    y:0,
    width:100,
    height:100
  },
  {
    id:3,
    type:"button",
    title:"按钮",
    content:"点击我",
    x:0,
    y:0,
    width:100,
    height:100
  },
  {
    id:4,
    type:"input",
    title:"输入框",
    content:"输入框",
    x:0,
    y:0,
    width:100,
    height:100
  },
  {
    id:5,
    type:"select",
    title:"下拉框",
    content:"下拉框",
    options:["选项1","选项2","选项3"],
    x:0,
    y:0,
    width:100,
    height:100
  },
  {
    id:6,
    type:"radio",
    title:"单选框",
    content:"单选框",
    options:["选项1","选项2","选项3"],
    x:0,
    y:0,
    width:100,
    height:100
  }
])

const materialContainer=ref(null)
const layoutContainer=ref(null)

const applyBlock=(arr,dropResult)=>{
  const result=[...arr]

  const {addedIndex,removedIndex,payload}=dropResult

  if(addedIndex===null) return result
  // 添加
  if(addedIndex!==null && removedIndex===null){
    result.splice(addedIndex,0,{
      id:`${Math.random()}`,
      ...payload
    })
  }
  // 移动
  if(addedIndex!==null && removedIndex !==null){
    return arrayMove(result,removedIndex,addedIndex)
  }

  return result
}

const arrayMove=(arr,from,to)=>{
  const newArr=arr.slice()

  newArr.splice(to<0?to+newArr.length:to,0,newArr.splice(from,1)[0])

  return newArr
}

onMounted(()=>{
  smoothDnD(materialContainer.value,
    {
      groupName:"material",
      behaviour:"copy",
      getChildPayload(index){
        return{
          id:data.value.length+1,
          type:materials[index].type,
          title:materials[index].title,
          content:materials[index].title,
          x:0,
          y:0,
          width:100,
          height:100
        }

      }
    }
  ),
  smoothDnD(layoutContainer.value,
    {
      groupName:"material",
      onDrop(dropResult){
        const result=applyBlock(toRaw(data.value),dropResult)
        data.value=result
      }
    }
  )
})


</script>

<style scoped>
.container{
  display: flex;
  height: 800px;
  background-color: black;
}
.material-panel{
  width: 200px;
  color: #fff;
}
.material-block{
  margin: 10px;
  cursor: pointer;
  border: 1px solid #fff;
  display: flex;
  padding: 20px;
  justify-content: center;
}
.layout{
  width: 100%;
  background: green;
}
.layout-item{
  display: flex;
  padding: 30px;
  border: 1px solid #fff;
  color: #fff;
  justify-content: center;
}
</style>
